const Ex = require('extract-text-webpack-plugin');
module.exports = [
  {
    test:/\.js$/,
    use: 'babel-loader',
    include: /src/,          // 只转化src目录下的js
    exclude: /node_modules/  // 排除掉node_modules，优化打包速度
  },
  {
    test: /\.css$/,
    use: Ex.extract({
      fallback: "style-loader",
      use: [
        {loader: 'css-loader'},
        {loader: 'postcss-loader'}
      ]
    }),
    exclude: /node_modules/,
  },
  {
    test: /\.(jpe?g|png|gif)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 8192,    // 小于8k的图片自动转成base64格式，并且不会存在实体图片
          outputPath: 'images/'   // 图片打包后存放的目录
        }
      }
    ]
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,  //字体
    loader: 'url-loader',
    options: {
      limit: 8192,
      name: 'fonts/[name].[hash:7].[ext]'
    }
  },
  {
    test: /\.(htm|html)$/,  /* 处理html里面引入的img */
    use: 'html-withimg-loader'
  },
  {
    test: /\.less$/,
    // 三个loader的顺序不能变
    // 不分离的写法
    // use: ["style-loader", "css-loader", "less-loader"]
    // 分离的写法
    use: Ex.extract({
      fallback:"style-loader",
      use: ["css-loader", "less-loader"]
    })
  },
  {
    test: /\.(scss|sass)$/,
    // sass不分离的写法，顺序不能变
    // use: ["style-loader", "css-loader", "sass-loader"]
    // 分离的写法
    use: Ex.extract({
      fallback:"style-loader",
      use: ["css-loader", "sass-loader"]
    })
  }
];